$base-color: hsla(222, 100%, 50%, 0.5);

$light-color: lighten($base-color, 30%);
$dark-color: darken($base-color, 20%);

$saturate-color: saturate($base-color, 50%);
$desaturate-color: desaturate($base-color, 30%);

$fade-in-color: opacify($base-color, 0.3);
$fade-out-color: transparentize($base-color, 0.2);

body {
  //background-color: rgb(255, 0, 0);
  background-color: hsl(60, 100%, 50%, 0.5);
}

.alert {
  border: 1px solid $base-color;
  background-color: $light-color;
}

.alert1 {
  background-color: $saturate-color;
}

.alert2 {
  background-color: $desaturate-color;
}

.alert3 {
  background-color: $fade-in-color;
}

.alert4 {
  background-color: $fade-out-color;
}